<template>
  <div class="suo_top" :style="{ 'background-image': 'url(' + backUrl + ')' }">
    <router-link :to="href">
      <img :src="imgUrl" />
    </router-link>
  </div>
</template>
<script>
export default {
  props: ["backUrl", "href", "imgUrl"],
  setup(props, context) {
    const { backUrl, imgUrl, href } = props;

    return {
      backUrl,
      imgUrl,
      href,
    };
  },
};
</script>
<style scoped>
.suo_top {
  width: 100%;
  height: 9rem;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 0.8rem;
}
.suo_top a {
  display: block;
  width: 8rem;
  height: 2rem;
}
.suo_top a img {
  width: 100%;
  height: 100%;
}
</style>